<template>
	<view>
		<tui-skeleton v-if="skeletonShow" backgroundColor="#fafafa" borderRadius="10rpx" loadingType="2"></tui-skeleton>
		<view class="container tui-skeleton">
			<view class="tower-box bg-darkgold margin-bottom-xs tui-skeleton-rect">
				<swiper class="screen-swiper round-dot" :indicator-dots="true" :circular="true"
				 :autoplay="true" interval="5000" duration="500" indicator-color="#8799a3"
				 indicator-active-color="#8c7866">
					<swiper-item v-for="(item,index) in collectionItem.imageArray" :key="index">
						<image :src="item" mode="aspectFit"></image>
					</swiper-item>
				</swiper>
			</view>
			<!-- 名称 -->
			<view class="watch-box bg-white margin-bottom-xs">
				<view class="cu-bar justify-center">
					<view class="action tui-skeleton-fillet">
						<text class="cuIcon-read text-yellow"></text>
						<text class="text-xl text-bold">{{collectionItem.name}}</text>
					</view>
				</view>
				<view class="flex justify-center padding-bottom-sm">
					<view class="text-gray text-lg margin-lr-lg tui-skeleton-fillet">
						<text class="cuIcon-attentionfill margin-lr-sm"></text> {{collectionItem.viewCount}}
					</view>
					<view class="text-gray text-lg margin-lr-lg tui-skeleton-fillet">
						<text class="cuIcon-likefill margin-lr-sm"></text> {{collectionItem.likeCount}}
					</view>
					<view class="text-gray text-lg margin-lr-lg tui-skeleton-fillet">
						<text class="cuIcon-messagefill margin-lr-sm"></text> {{collectionItem.commentCount}}
					</view>
					<view class="text-gray text-lg margin-lr tui-skeleton-fillet" @click="threeD(collectionItem.threeDUrl)" v-if="collectionItem.threeDUrl">
						<text class="cuIcon-cardboardfill margin-lr-sm"></text> 3D
					</view>
				</view>
			</view>
			<!-- 基本信息 -->
			<view class="baseInfo-box bg-white margin-bottom-xs">
				<view class="cu-bar solid-bottom">
					<view class="action">
						<text class="cuIcon-titles text-darkgold"></text>
						<text class="text-df text-bold tui-skeleton-rect">基本信息</text>
					</view>
				</view>
				<view class="text-content padding-sm tui-skeleton-fillet">
					{{collectionItem.basicInfo}}
				</view>
			</view>
			<!-- 藏品介绍 -->
			<view class="objectDesc-box bg-white margin-bottom-xs">
				<view class="cu-bar solid-bottom">
					<view class="action">
						<text class="cuIcon-titles text-darkgold"></text>
						<text class="text-df text-bold tui-skeleton-rect">藏品介绍</text>
					</view>
				</view>
				<view class="text-content padding-sm tui-skeleton-fillet">
					{{collectionItem.detailInfo}}
				</view>
			</view>
			<!-- 留言板 -->
			<view class="assess-box bg-white margin-bottom-xs">
				<view class="cu-bar solid-bottom">
					<view class="action">
						<text class="cuIcon-titles text-darkgold"></text>
						<text class="text-df text-bold tui-skeleton-rect">最新评论</text>
					</view>
				</view>
				<view class="padding-sm tui-skeleton-fillet">
					<view v-if="cmtList.length == 0" class="padding-tb-lg padding-lr text-content text-whitegray text-sm text-center">暂无评论</view>
					<view class="tui-cmt-cell" v-for="(item, index) in cmtList" :key="index">
						<image :src="item.avatar" class="tui-avatar tui-skeleton-circular"></image>
						<view class="tui-cmt-detail">
							<view class="tui-header-box tui-skeleton-fillet">
								<view class="tui-cmt-nickname">{{ item.nickname }}</view>
							</view>
							<view class="tui-cmt-content text-content">{{ item.content }}</view>
							<view class="tui-reply-box" v-if="item.replayNum > 0">
								<tui-list-cell backgroundColor="#f2f2f2" :size="28" padding="10rpx 20rpx" v-for="(items, index2) in item.replayArray"
									:key="index2" :unlined="item.replayNum < 2 && item.replayArray.length - 1 == index">
									<view class="tui-flex-1 tui-reply-nickname">{{ items.nickname }}</view>
									<view class="tui-flex-1 text-content">{{ items.content }}</view>
								</tui-list-cell>
								<view v-if="item.replayNum > 0" @tap="cmtReply" :data-cmtuid="item.uid">
									<tui-list-cell padding="16rpx 20rpx" backgroundColor="#f2f2f2" :size="28" :unlined="true">
										<view class="tui-flex-1  tui-cell-last">
											<text>共{{ item.replayNum }}条回复</text>
											<tui-icon name="arrowright" :size="22" color="#5677fc"></tui-icon>
										</view>
									</tui-list-cell>
								</view>
							</view>
							<view class="tui-footer tui-skeleton-fillet">
								{{ item.time }}
								<view class="tui-primary tui-ml" hover-class="opcity" :hover-start-time="150" 
								v-if="item.replayNum == 0" @tap="cmtReply" :data-cmtuid="item.uid">回复</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<!--加载loadding-->
			<tui-loadmore v-if="loadding" :index="3" type="darkgold"></tui-loadmore>
			<tui-nomore v-if="cmtList.length > 0 && !pullUpOn" backgroundColor="#f1f1f1" text="没有更多评论"></tui-nomore>
			<!--加载loadding-->
			<view class="tui-safearea-bottom"></view>
			
			<tui-scroll-top :scrollTop="scrollTop" isContact="true" bottom="150"></tui-scroll-top>
			
			<view class="tui-operation">
				<view class="tui-operation-left tui-col-7"><view class="tui-btn-comment" @tap="btnCmt">发表你的评论...</view></view>
				<view class="tui-operation-right tui-right-flex tui-col-5">
					<view class="tui-operation-item" hover-class="tui-opcity" :hover-stay-time="150" @tap="cmtAll">
						<tui-icon name="message" :size="30" color="#444"></tui-icon>
						<tui-badge absolute type="white_primary" :scaleRatio="0.7">{{collectionItem.commentCount}}</tui-badge>
					</view>
					<view class="tui-operation-item" @tap="collection">
						<tui-icon :name="isCollection ? 'like-fill' : 'like'" :size="29" :color="isCollection ? '#FD3B31' : '#444'"></tui-icon>
					</view>
					<view class="tui-operation-item" hover-class="tui-opcity" :hover-stay-time="150" @tap="btnShare">
						<button open-type="share" class="tui-share-btn"><tui-icon name="share" :size="31" color="#444"></tui-icon></button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import json from '@/json';
	export default {
		data() {
			return {
				skeletonShow: true,
				collectionUid: "",
				collectionItem: {},
				swiperList: [],
				isCollection: false,
				cmtList: [],
				pageNum: 1,
				pageSize: 5,
				loadding: false,
				pullUpOn: true,
				scrollTop: 0,
			};
		},
		async onLoad(option) {
			this.skeletonShow = true
			if (option.uid) {
				this.collectionUid = option.uid
			}
		},
		async onShow() {
			this.skeletonShow = true
			this.getCollectionDetail()
			this.getCollectionCmt('onLoad')
		},
		computed: {
			itemIconColor() {
				return function(isFabulous) {
					return isFabulous ? '#5677fc' : '#9a9a9a'
				}
			},
			iconName() {
				return function(isFabulous) {
					return isFabulous ? 'agree-fill' : 'agree'
				}
			}
		},
		methods: {
			getCollectionDetail() {
				this.fetch.request("/api/wxmini/getCollectionDetail", "POST", {
					uid: this.collectionUid
				}, false, true, true, this)
				.then((res) => {
					if (res.code == 0) {
						this.collectionItem = res.data
						if (res.data.isCollection) {
							this.isCollection = res.data.isCollection
						}
						this.skeletonShow = false
					}
				}).catch(() => {})
			},
			getCollectionCmt(type) {
				if (type == 'onLoad' || type == 'refresh') {
					this.pageNum = 1
					this.pullUpOn = true
					this.loadding = false
				}
				this.fetch.request("/api/wxmini/getCommentList", "POST", {
					collectionUid: this.collectionUid,
					pageNum: this.pageNum,
					pageSize: this.pageSize
				}, false, true, true, this)
				.then((res) => {
					if (res.code == 0) {
						let data = res.data
						if (type != 'loadMore') {
							this.cmtList = []
						}
						data.rows.forEach((item) => {
							this.cmtList.push({
								uid: item.uid,
								avatar: item.avatar,
								nickname: item.nickName,
								content: item.content,
								replayNum: item.replyCount,
								replayArray: item.replyArray,
								time: item.createDate,
							})
						})
						if (type == 'onLoad') {
							this.skeletonShow = false
						}
						if (type == 'refresh') {
							setTimeout(() => {
								uni.stopPullDownRefresh();
							}, 200);
						}
						if (type == 'loadMore') {
							this.loadding = false
						}
						if (this.cmtList.length >= data.total) {
							this.pullUpOn = false
						}
					}
				}).catch(() => {})
			},
			btnFabulous: function() {
				this.fabulous = this.isFabulous ? 123 : 124;
				this.isFabulous = !this.isFabulous
			},
			cmtFabulous: function(e) {
				let index = e.currentTarget.id;
				let fabulousObj = this.cmtList[index];
				let isFabulous = this.cmtList[index].isFabulous;
				let fabulous = this.cmtList[index].fabulous;
				let fabulousNum = isFabulous ? fabulous - 1 : fabulous + 1;
				this.$set(fabulousObj, "fabulous", fabulousNum);
				this.$set(fabulousObj, "isFabulous", !isFabulous);
			},
			collection: function() {
				if (!this.isCollection) {
					this.fetch.request("/api/wxmini/likeColloetion", "POST", 
					{
						collectionId: this.collectionUid
					}, false, true, false, this)
					.then((res) => {
						if (res.code == 0) {
							this.isCollection = !this.isCollection
							console.log("isCollection=" + this.isCollection);
							this.collectionItem.likeCount = this.collectionItem.likeCount + 1
						}
						this.fetch.toast(res.msg, 1500, res.code == 0)
					}).catch(() => {})
				} else {
					this.fetch.request("/api/wxmini/unLikeColloetion", "POST",
					{
						collectionId: this.collectionUid
					}, false, true, false, this)
					.then((res) => {
						
						if (res.code == 0) {
							this.isCollection = !this.isCollection
							this.collectionItem.likeCount = this.collectionItem.likeCount - 1
						}
						this.fetch.toast(res.msg, 1500, res.code == 0)
					}).catch(() => {})
				}
			},
			btnCmt: function() {
				uni.navigateTo({
					url: '/pages/comment/comment?collectionUid=' + this.collectionUid
				})
			},
			cmtAll: function() {
				uni.navigateTo({
					url: '/pages/comment/commentList?collectionUid=' + this.collectionUid
				})
			},
			cmtReply: function(e) {
				let data = {
					collectionUid: this.collectionUid,
					commentUid: e.currentTarget.dataset.cmtuid
				}
				uni.navigateTo({
					url: `/pages/comment/commentReply?data=${JSON.stringify(data)}`
				})
			},
			btnShare(){
				
			},
			threeD(vrImage) {
				// let objectIndex = this.objectIndex;
				uni.navigateTo({
					url:'3DWeb?vrImage=' + vrImage,
				})
			},
		},
		//页面相关事件处理函数--监听用户下拉动作
		onPullDownRefresh: function() {
			this.getCollectionDetail();
			this.getCollectionCmt('refresh');
		},
		// 页面上拉触底事件的处理函数
		onReachBottom: function() {
			if (this.loadding || !this.pullUpOn) {
				return;
			}
			this.loadding = true
			this.pageNum = this.pageNum + 1
			this.getCollectionCmt('loadMore');
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		}
	}
</script>

<style>
/* 	page {
		background-color: #fafafa;
	} */
	
	.tui-cmt-cell {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #eaeef1;
	}
	
	.tui-cmt-cell:first-child {
		padding-top: 0;
	}
	
	.tui-cmt-cell:last-child {
		padding-bottom: 0;
		border-bottom: 0 !important;
	}
	
	.tui-avatar {
		width: 64rpx;
		height: 64rpx;
		border-radius: 32rpx;
		display: block;
		flex-shrink: 0;
	}
	
	.tui-cmt-detail {
		width: 100%;
		padding-left: 16rpx;
		box-sizing: border-box;
	}
	
	.tui-header-box {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		font-size: 30rpx;
	}
	
	.tui-cmt-nickname {
		/* color: #5677fc; */
		color: #9a9a9a;
	}
	
	.tui-fabulous {
		color: #9a9a9a;
	}
	
	.tui-fabulous text {
		padding-right: 4rpx;
		font-size: 24rpx;
	}
	
	.tui-cmt-content {
		color: #333;
		text-align: justify;
		padding-top: 8rpx;
		word-break: break-all;
		word-wrap: break-word;
	}
	
	.tui-reply-box {
		border-radius: 8rpx;
		overflow: hidden;
		margin-top: 16rpx;
	}
	
	.tui-cell-last {
		display: flex;
		align-items: center;
		word-wrap: break-word;
		color: #5677fc;
	}
	.tui-flex-1 {
		flex: 1;
		width: 100%;
	}
	
	.tui-reply-nickname {
		font-size: 24rpx;
		color: #7a7a7a;
		padding-bottom: 8rpx;
	}
	
	.tui-footer {
		display: flex;
		align-items: center;
		font-size: 24rpx;
		margin-top: 16rpx;
		color: #9a9a9a;
	}
	
	.tui-primary {
		color: #5677fc !important;
	}
	
	.tui-ml {
		margin-left: 16rpx;
	}
	
	.tui-operation {
		width: 100%;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 99999;
		padding-bottom: env(safe-area-inset-bottom);
	}
	
	.tui-safearea-bottom {
		width: 100%;
		height: calc(100rpx + env(safe-area-inset-bottom));
	}
	
	.tui-operation::before {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		border-top: 1rpx solid #eaeef1;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
	}
	
	.tui-operation-left {
		display: flex;
		align-items: center;
	}
	
	.tui-operation-item {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		position: relative;
	}
	
	.tui-operation-right {
		height: 100rpx;
		box-sizing: border-box;
		padding-top: 0;
	}
	
	.tui-right-flex {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.tui-btn-comment {
		height: 64rpx;
		width: 84%;
		background: #ededed;
		color: #999;
		border-radius: 8rpx;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		padding-left: 20rpx;
		box-sizing: border-box;
		padding-top: 0;
		margin-left: 30rpx;
	}
	
	.tui-col-7 {
		width: 58.33333333%;
	}
	
	.tui-col-5 {
		width: 41.66666667%;
	}
	
	.tui-share-btn {
		display: block;
		background: none;
		margin: 0;
		padding: 0;
	}
	.tui-share-btn::after{
		border: 0;
	}
</style>
